<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.4. Grouping content</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="sections.html#sections"><span class="secno">4.3</span> <span class="content">Sections</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="textlevel-semantics.html#textlevel-semantics"><span class="secno">4.5</span> <span class="content">Text-level semantics</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="grouping-content.html#grouping-content"><span class="secno">4.4</span> <span class="content">Grouping content</span></a>
       <ol class="toc">
        <li><a href="grouping-content.html#the-p-element"><span class="secno">4.4.1</span> <span class="content">The <span><code>p</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-hr-element"><span class="secno">4.4.2</span> <span class="content">The <span><code>hr</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-pre-element"><span class="secno">4.4.3</span> <span class="content">The <span><code>pre</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-blockquote-element"><span class="secno">4.4.4</span> <span class="content">The <span><code>blockquote</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-ol-element"><span class="secno">4.4.5</span> <span class="content">The <span><code>ol</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-ul-element"><span class="secno">4.4.6</span> <span class="content">The <span><code>ul</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-li-element"><span class="secno">4.4.7</span> <span class="content">The <span><code>li</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-dl-element"><span class="secno">4.4.8</span> <span class="content">The <span><code>dl</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-dt-element"><span class="secno">4.4.9</span> <span class="content">The <span><code>dt</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-dd-element"><span class="secno">4.4.10</span> <span class="content">The <span><code>dd</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-figure-element"><span class="secno">4.4.11</span> <span class="content">The <span><code>figure</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-figcaption-element"><span class="secno">4.4.12</span> <span class="content">The <span><code>figcaption</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-main-element"><span class="secno">4.4.13</span> <span class="content">The <span><code>main</code></span> element</span></a>
        </li><li><a href="grouping-content.html#the-div-element"><span class="secno">4.4.14</span> <span class="content">The <span><code>div</code></span> element</span></a>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.4" id="grouping-content"><span class="secno">4.4. </span><span class="content">Grouping content</span><a class="self-link" href="grouping-content.html#grouping-content"></a></h3>
     <h4 class="heading settled" data-level="4.4.1" id="the-p-element"><span class="secno">4.4.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-p"><code>p</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-p-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-18">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-33">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-10">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-17">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-34">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-20">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-19">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-17">Tag omission in text/html</a>:
      </dt><dd> A <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-18">p</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-9">end tag</a> may be omitted if the <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-19">p</a></code> element is
      immediately followed by an <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-13">address</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-31">article</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-13">aside</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-7">blockquote</a></code>, <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-5">details</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-12">div</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-3">dl</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-4">fieldset</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-1">figcaption</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-4">figure</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-20">footer</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-form" id="ref-for-elementdef-form-12">form</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-10">h1</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h2" id="ref-for-elementdef-h2-6">h2</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h3" id="ref-for-elementdef-h3-4">h3</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h4" id="ref-for-elementdef-h4-4">h4</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h5" id="ref-for-elementdef-h5-4">h5</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h6" id="ref-for-elementdef-h6-5">h6</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-21">header</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-4">hr</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-10">main</a></code>, <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-5">menu</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-17">nav</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-5">ol</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-20">p</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-5">pre</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-19">section</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-4">table</a></code>, or <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-5">ul</a></code>, element, or if
      there is no more content in the parent element and the parent element is an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-48">HTML element</a> that is not an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-20">a</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-9">audio</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-10">del</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-15">ins</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-12">map</a></code>, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-8">noscript</a></code>,
      or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-8">video</a></code> element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-18">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-17">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-19">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-17">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLParagraphElement" data-dfn-type="interface" data-export="" id="htmlparagraphelement-htmlparagraphelement">HTMLParagraphElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-27">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-21">p</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-22">represents</a> a <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-7">paragraph</a>.</p>
     <p class="note" role="note"> While paragraphs are usually represented in visual media by blocks of text that are physically
    separated from adjacent blocks through blank lines, a style sheet or user agent would be equally
    justified in presenting paragraph breaks in a different manner, for instance using inline
    pilcrows (¶). </p>
     <div class="example" id="example-d5e88398">
      <a class="self-link" href="grouping-content.html#example-d5e88398"></a> The following examples are conforming HTML fragments: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The little kitten gently seated itself on a piece of
carpet. Later in his life, this would be referred to as the time the
cat sat on the mat.<span class="nt">&lt;/p&gt;</span>
</pre>
<pre class="highlight"><span class="nt">&lt;fieldset&gt;</span>
  <span class="nt">&lt;legend&gt;</span>Personal information<span class="nt">&lt;/legend&gt;</span>
  <span class="nt">&lt;p&gt;</span>
    <span class="nt">&lt;label&gt;</span>Name: <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"n"</span><span class="nt">&gt;&lt;/label&gt;</span>
    <span class="nt">&lt;label&gt;&lt;input</span> <span class="na">name=</span><span class="s">"anon"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Hide from other users<span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;&lt;label&gt;</span>Address: <span class="nt">&lt;textarea</span> <span class="na">name=</span><span class="s">"a"</span><span class="nt">&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;</span>
<span class="nt">&lt;/fieldset&gt;</span>
</pre>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>There was once an example from Femley,<span class="nt">&lt;br&gt;</span>
Whose markup was of dubious quality.<span class="nt">&lt;br&gt;</span>
The validator complained,<span class="nt">&lt;br&gt;</span>
So the author was pained,<span class="nt">&lt;br&gt;</span>
To move the error from the markup to the rhyming.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-22">p</a></code> element should not be used when a more specific element is more appropriate.</p>
     <div class="example" id="example-e49943ac">
      <a class="self-link" href="grouping-content.html#example-e49943ac"></a> The following example is technically correct: 
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="c">&lt;!-- ... --&gt;</span>
  <span class="nt">&lt;p&gt;</span>Last modified: 2001-04-23<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>Author: fred@example.com<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
      <p>However, it would be better marked-up as:</p>
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="c">&lt;!-- ... --&gt;</span>
  <span class="nt">&lt;footer&gt;</span>Last modified: 2001-04-23<span class="nt">&lt;/footer&gt;</span>
  <span class="nt">&lt;address&gt;</span>Author: fred@example.com<span class="nt">&lt;/address&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
      <p>Or:</p>
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="c">&lt;!-- ... --&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
  <span class="nt">&lt;p&gt;</span>Last modified: 2001-04-23<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;address&gt;</span>Author: fred@example.com<span class="nt">&lt;/address&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
     </div>
     <div class="note" role="note">
       List elements (in particular, <code>ol</code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-6">ul</a></code> elements) cannot be children
    of <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-23">p</a></code> elements. When a sentence contains a bulleted list, therefore, one might
    wonder how it should be marked up. 
      <div class="example" id="example-df729cd4">
       <a class="self-link" href="grouping-content.html#example-df729cd4"></a> For instance, this fantastic sentence has bullets relating to 
       <ul>
        <li data-md="">
         <p>wizards,</p>
        </li><li data-md="">
         <p>faster-than-light travel, and</p>
        </li><li data-md="">
         <p>telepathy,</p>
       </li></ul>
       <p>and is further discussed below.</p>
      </div>
      <p>The solution is to realize that a <i>paragraph</i>, in HTML terms, is not a logical concept, but
    a structural one. In the fantastic example above, there are actually <em>five</em> <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-8">paragraphs</a> as defined by this specification: one before the list, one for each bullet,
    and one after the list.</p>
      <div class="example" id="example-9f07bf0d">
       <a class="self-link" href="grouping-content.html#example-9f07bf0d"></a> The markup for the above example could therefore be: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>For instance, this fantastic sentence has bullets relating to<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;</span>wizards,
  <span class="nt">&lt;li&gt;</span>faster-than-light travel, and
  <span class="nt">&lt;li&gt;</span>telepathy,
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;p&gt;</span>and is further discussed below.<span class="nt">&lt;/p&gt;</span>
</pre>
      </div>
      <p>Authors wishing to conveniently style such "logical" paragraphs consisting of multiple
    "structural" paragraphs can use the <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-13">div</a></code> element instead of the <code>p</code> element.</p>
      <div class="example" id="example-a71f5c4c">
       <a class="self-link" href="grouping-content.html#example-a71f5c4c"></a> Thus for instance the above example could become the following: 
<pre class="highlight"><span class="nt">&lt;div&gt;</span>For instance, this fantastic sentence has bullets relating to
  <span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;</span>wizards,
    <span class="nt">&lt;li&gt;</span>faster-than-light travel, and
    <span class="nt">&lt;li&gt;</span>telepathy,
  <span class="nt">&lt;/ul&gt;</span>
and is further discussed below.<span class="nt">&lt;/div&gt;</span>
</pre>
       <p>This example still has five structural paragraphs, but now the author can style just the <code>div</code> instead of having to consider each part of the example separately.</p>
      </div>
     </div>
     <h4 class="heading settled" data-level="4.4.2" id="the-hr-element"><span class="secno">4.4.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-hr"><code>hr</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-hr-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-19">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-35">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-18">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-36">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-21">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-4">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-18">Tag omission in text/html</a>:
      </dt><dd>No <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-10">end tag</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-19">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-18">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#separator"><code>separator</code></a> (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-10"><em>do not set</em></a>) or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-20">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-18">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLHRElement" data-dfn-type="interface" data-export="" id="htmlhrelement-htmlhrelement">HTMLHRElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-28">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-5">hr</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-23">represents</a> a <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-9">paragraph</a>-level thematic break, e.g., a
  scene change in a story, or a transition to another topic within a section of a reference book.</p>
     <div class="example" id="example-a4e766ec">
      <a class="self-link" href="grouping-content.html#example-a4e766ec"></a> The following fictional extract from a project manual shows two sections that use the <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-6">hr</a></code> element to separate topics within the section. 
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Communication<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>There are various methods of communication. This section
  covers a few of the important ones used by the project.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;hr&gt;</span>
  <span class="nt">&lt;p&gt;</span>Communication stones seem to come in pairs and have mysterious
  properties:<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;</span>They can transfer thoughts in two directions once activated
    if used alone.<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;</span>If used with another device, they can transfer one’s
    consciousness to another body.<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;</span>If both stones are used with another device, the
    consciousnesses switch bodies.<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;hr&gt;</span>
  <span class="nt">&lt;p&gt;</span>Radios use the electromagnetic spectrum in the meter range and
  longer.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;hr&gt;</span>
  <span class="nt">&lt;p&gt;</span>Signal flares use the electromagnetic spectrum in the
  nanometer range.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Food<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>All food at the project is rationed:<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;dl&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Potatoes<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;</span>Two per day<span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Soup<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;</span>One bowl per day<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;hr&gt;</span>
  <span class="nt">&lt;p&gt;</span>Cooking is done by the chefs on a set rotation.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
      <p>There is no need for an <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-7">hr</a></code> element between the sections themselves, since the <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-20">section</a></code> elements and the <code>h1</code> elements imply thematic changes
    themselves.</p>
     </div>
     <div class="example" id="example-885c5e22">
      <a class="self-link" href="grouping-content.html#example-885c5e22"></a> The following extract from <cite>Pandora’s Star</cite> by Peter F. Hamilton shows two
    paragraphs that precede a scene change and the paragraph that follows it. The scene change,
    represented in the printed book by a gap containing a solitary centered star between the second
    and third paragraphs, is here represented using the <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-8">hr</a></code> element. 
<pre lang="en-GB">&lt;p&gt;Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Maybe it won’t be that bad&lt;/i&gt;, he told himself. The lie was
comforting enough to get him through the rest of the night’s
shift.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond’s winters.&lt;/p&gt;
</pre>
     </div>
     <p class="note" role="note">The <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-9">hr</a></code> element does not affect the document’s <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-22">outline</a>.</p>
     <h4 class="heading settled" data-level="4.4.3" id="the-pre-element"><span class="secno">4.4.3. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-pre"><code>pre</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-pre-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-20">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-37">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-11">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-19">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-38">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-22">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-20">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-19">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-20">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-19">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-21">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-19">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLPreElement" data-dfn-type="interface" data-export="" id="htmlpreelement-htmlpreelement">HTMLPreElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-29">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-6">pre</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-24">represents</a> a block of preformatted text, in which structure is
  represented by typographic conventions rather than by elements.</p>
     <p class="note" role="note"> In <a href="syntax.html#syntax">the HTML syntax</a>, a leading newline character immediately following the <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-7">pre</a></code> element start tag is stripped. </p>
     <p>Some examples of cases where the <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-8">pre</a></code> element could be used:</p>
     <ul>
      <li data-md="">
       <p>Including an e-mail, with paragraphs indicated by blank lines, lists indicated by lines prefixed
with a bullet, and so on.</p>
      </li><li data-md="">
       <p>Including fragments of computer code, with structure indicated according to the conventions of
that language.</p>
      </li><li data-md="">
       <p>Displaying ASCII art.</p>
     </li></ul>
     <p class="note" role="note"> Authors are encouraged to consider how preformatted text will be experienced when the formatting
    is lost, as will be the case for users of speech synthesizers, braille displays, and the like.
    For cases like ASCII art, it is likely that an alternative presentation, such as a textual
    description, would be more universally accessible to the readers of the document. </p>
     <p>To represent a block of computer code, the <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-9">pre</a></code> element can be used with a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-4">code</a></code> element; to represent a block of computer output the <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-10">pre</a></code> element
  can be used with a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-4">samp</a></code> element. Similarly, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-5">kbd</a></code> element can be used
  within a <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-11">pre</a></code> element to indicate text that the user is to enter.</p>
     <div class="impl">
      <p class="note" role="note"> This element <a href="dom.html#bidireq">has rendering requirements involving the bidirectional algorithm</a>. </p>
     </div>
     <div class="example" id="example-666bcced">
      <a class="self-link" href="grouping-content.html#example-666bcced"></a> In the following snippet, a sample of computer code is presented. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>This is the <span class="nt">&lt;code&gt;</span>Panel<span class="nt">&lt;/code&gt;</span> constructor:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;pre&gt;&lt;code&gt;</span>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}<span class="nt">&lt;/code&gt;&lt;/pre&gt;</span>
</pre>
     </div>
     <div class="example" id="example-ba64a441">
      <a class="self-link" href="grouping-content.html#example-ba64a441"></a> In the following snippet, <code>samp</code> and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-6">kbd</a></code> elements are mixed in the
    contents of a <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-12">pre</a></code> element to show a session of Zork I. 
<pre class="highlight"><span class="nt">&lt;pre&gt;&lt;samp&gt;</span>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

&gt;<span class="nt">&lt;/samp&gt;</span> <span class="nt">&lt;kbd&gt;</span>open mailbox<span class="nt">&lt;/kbd&gt;</span>

<span class="nt">&lt;samp&gt;</span>Opening the mailbox reveals:
A leaflet.

&gt;<span class="nt">&lt;/samp&gt;&lt;/pre&gt;</span>
</pre>
     </div>
     <div class="example" id="example-3afa9100">
      <a class="self-link" href="grouping-content.html#example-3afa9100"></a> The following shows a contemporary poem that uses the <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-13">pre</a></code> element to preserve its
    unusual formatting, which forms an intrinsic part of the poem itself. 
<pre class="highlight"><span class="nt">&lt;pre&gt;</span>                maxling

it is with a          heart
                heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07<span class="nt">&lt;/pre&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.4.4" id="the-blockquote-element"><span class="secno">4.4.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-blockquote"><code>blockquote</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-blockquote-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-21">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-39">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-19">Sectioning root</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-12">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-20">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-40">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-23">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-41">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-20">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-21">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-20">Global attributes</a>
      </dd><dd><code>cite</code> - Link to the source of the quotation.
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-22">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-20">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLQuoteElement" data-dfn-type="interface" data-export="" id="htmlquoteelement-htmlquoteelement">HTMLQuoteElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-30">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLQuoteElement" data-dfn-type="attribute" data-export="" data-type="DOMString" id="dom-htmlquoteelement-cite">cite<a class="self-link" href="grouping-content.html#dom-htmlquoteelement-cite"></a></dfn>;
};
</pre>
       <p class="note" role="note"> The <code>HTMLQuoteElement</code> interface is also used by the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-5">q</a></code> element. </p>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-8">blockquote</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-25">represents</a> content that is quoted from another source,
  optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p>
     <p>Content inside a <code>blockquote</code> other than citations and in-line changes must be quoted
  from another source, whose address, if it has one, may be cited in the <dfn class="dfn-paneled" data-dfn-for="blockquote" data-dfn-type="element-attr" data-export="" id="element-attrdef-blockquote-cite"><code>cite</code></dfn> attribute.</p>
     <p class="note" role="note"> In cases where a page contains contributions from multiple people, such as comments on a blog
    post, '<i>another source</i>' can include text from the same page, written by another person. </p>
     <p>If the <code>cite</code> attribute is present, it must be a <a data-link-type="dfn" href="infrastructure.html#valid-url-potentially-surrounded-by-spaces" id="ref-for-valid-url-potentially-surrounded-by-spaces-2">valid URL potentially surrounded by spaces</a>. <span class="impl">To obtain the corresponding
  citation link, the value of the attribute must be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#resolve-promise">resolved</a> relative to the element.</span> User agents may allow users to follow such citation links, but they are primarily intended for
  private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations),
  not for readers.</p>
     <div class="impl"> The <code><a data-link-type="element-sub" href="grouping-content.html#element-attrdef-blockquote-cite" id="ref-for-element-attrdef-blockquote-cite-1">cite</a></code> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-15">reflect</a> the element’s <code><a data-link-type="element-sub" href="grouping-content.html#element-attrdef-blockquote-cite" id="ref-for-element-attrdef-blockquote-cite-2">cite</a></code> content attribute. </div>
     <p>The content of a <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-9">blockquote</a></code> may be abbreviated, may have context added or may have
  annotations. Any such additions or changes to quoted text must be indicated in the text (at the
  text level). This may mean the use of notational conventions or explicit remarks, such as
  "emphasis mine".</p>
     <div class="example" id="example-9ac2c8a9">
      <a class="self-link" href="grouping-content.html#example-9ac2c8a9"></a> For example, in English, abbreviations are traditionally identified using square brackets.
    Consider a page with the sentence "Fred ate the cracker. He then said he liked apples and
    fish."; it could be quoted as follows: 
<pre class="highlight"><span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>[Fred] then said he liked [...] fish.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span>
</pre>
     </div>
     <p>Quotation marks may be used to delineate between quoted text and annotations within a <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-10">blockquote</a></code>.</p>
     <div class="example" id="example-b3901a9d">
      <a class="self-link" href="grouping-content.html#example-b3901a9d"></a> For example, an in-line note provided by the author: 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
<span class="nt">&lt;blockquote&gt;</span>
"That monster custom, who all sense doth eat
Of habit’s devil," <mark><span class="nt">&lt;abbr</span> <span class="na">title=</span><span class="s">"et cetera"</span><span class="nt">&gt;</span><span class="err">&amp;</span>c.<span class="nt">&lt;/abbr&gt;</span> not in Folio</mark>

"What a falling off was there !
From me, whose love was of that dignity
That it went hand in hand even with the vow
I made to her in marriage, and to decline
Upon a wretch."
<span class="nt">&lt;/blockquote&gt;</span>
<span class="nt">&lt;footer&gt;</span>
— <span class="nt">&lt;cite</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Shakespeare manual<span class="nt">&lt;/cite&gt;</span> by <span class="nt">&lt;cite</span> <span class="na">class=</span><span class="s">"author"</span><span class="nt">&gt;</span>Frederick Gard Fleay<span class="nt">&lt;/cite&gt;</span>,
p19 (in Google Books)
<span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
      <p class="note" role="note"> In the example above, the citation is contained within the <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-21">footer</a></code> of a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-5">figure</a></code> element, this groups and associates the information, about the quote, with
      the quote. The <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-2">figcaption</a></code> element was not used, in this case, as a container for
      the citation as it is not a caption. </p>
     </div>
     <p>Attribution for the quotation, may be be placed inside the <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-11">blockquote</a></code> element, but
  must be within a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-4">cite</a></code> element for in-text attributions or within a <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-22">footer</a></code> element.</p>
     <div class="example" id="example-f39d527a">
      <a class="self-link" href="grouping-content.html#example-f39d527a"></a> For example, here the attribution is given in a <code>footer</code> after the quoted text, to
    clearly relate the quote to its attribution: 
<pre class="highlight"><span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>I contend that we are both atheists. I just believe in one fewer
  god than you do. When you understand why you dismiss all the other
  possible gods, you will understand why I dismiss yours.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>— <span class="nt">&lt;cite&gt;</span>Stephen Roberts<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span>
</pre>
     </div>
     <div class="example" id="example-39196924">
      <a class="self-link" href="grouping-content.html#example-39196924"></a> Here the attribution is given in a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-5">cite</a></code> element on the last line of the quoted
    text. Note that a link to the author is also included. 
<pre class="highlight"><span class="nt">&lt;blockquote&gt;</span>
  The people recognize themselves in their commodities; they find their
  soul in their automobile, hi-fi set, split-level home, kitchen equipment.
  — <span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://en.wikipedia.org/wiki/Herbert_Marcuse"</span><span class="nt">&gt;</span>Herbert Marcuse<span class="nt">&lt;/a&gt;&lt;/cite&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span>
</pre>
     </div>
     <div class="example" id="example-f232d7d4">
      <a class="self-link" href="grouping-content.html#example-f232d7d4"></a> Here the attribution is given in a <code>footer</code> after the quoted text, and metadata about
    the reference has been added using the <a data-link-type="dfn" href="https://www.w3.org/TR/rdfa-lite/#h-document-conformance">RDFA Lite</a> syntax. <a data-link-type="biblio" href="references.html#biblio-rdfa-lite">[rdfa-lite]</a> 
<pre class="highlight"><span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>... she said she would not sign any deposition containing the word "amorous"
  instead of "advances". For her the difference was of crucial significance,
  and one of the reasons she had separated from her husband was that he had never been
  amorous but had consistently made advances.<span class="nt">&lt;/p&gt;</span>

  <span class="nt">&lt;footer</span> <span class="na">typeof=</span><span class="s">"schema:Book"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">property=</span><span class="s">"schema:author"</span><span class="nt">&gt;</span>Heinrich Böll<span class="nt">&lt;/span&gt;</span>,
    <span class="nt">&lt;span</span> <span class="na">property=</span><span class="s">"schema:name"</span><span class="nt">&gt;</span>The Lost Honor of Katharina Blum<span class="nt">&lt;/span&gt;</span>,
    <span class="nt">&lt;span</span> <span class="na">property=</span><span class="s">"schema:datePublished"</span><span class="nt">&gt;</span>January 1, 1974<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span>
</pre>
     </div>
     <p class="note" role="note"> There is no formal method for indicating the markup in a <code>blockquote</code> is from a
    quoted source. It is suggested that if the <code>footer</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-6">cite</a></code> elements are
    included and these elements are also being used within a <code>blockquote</code> to identify
    citations, the elements from the quoted source could be annotated with metadata to identify
    their origin, for example by using the <code>class</code> attribute (a defined
    extensibility mechanism). </p>
     <div class="example" id="example-4a8959d0">
      <a class="self-link" href="grouping-content.html#example-4a8959d0"></a> In this example the source of a quote includes a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-7">cite</a></code> element, which is annotated
    using the <code>class</code> attribute: 
<pre class="highlight"><span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>My favorite book is <mark><span class="nt">&lt;cite</span> <span class="na">class=</span><span class="s">"from-source"</span><span class="nt">&gt;</span>At Swim-Two-Birds<span class="nt">&lt;/cite&gt;</span></mark><span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>- <span class="nt">&lt;cite&gt;</span>Mike[tm]Smith<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span>
</pre>
     </div>
     <p>The other examples below show other ways of showing attribution.</p>
     <div class="example" id="example-7c6d3377">
      <a class="self-link" href="grouping-content.html#example-7c6d3377"></a> Here a <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-12">blockquote</a></code> element is used in conjunction with a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-6">figure</a></code> element
    and its <code>figcaption</code>: 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what’s true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/blockquote&gt;</span>
  <span class="nt">&lt;figcaption&gt;&lt;cite&gt;</span>Carl Sagan<span class="nt">&lt;/cite&gt;</span>, in "<span class="nt">&lt;cite&gt;</span>Wonder and Skepticism<span class="nt">&lt;/cite&gt;</span>", from
  the <span class="nt">&lt;cite&gt;</span>Skeptical Inquirer<span class="nt">&lt;/cite&gt;</span> Volume 19, Issue 1 (January-February
  1995)<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
     </div>
     <div class="example" id="example-ec1bbf33">
      <a class="self-link" href="grouping-content.html#example-ec1bbf33"></a> This next example shows the use of <code>cite</code> alongside <code>blockquote</code>: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>His next piece was the aptly named <span class="nt">&lt;cite&gt;</span>Sonnet 130<span class="nt">&lt;/cite&gt;</span>:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;blockquote</span> <span class="na">cite=</span><span class="s">"https://quotes.example.org/s/sonnet130.html"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>My mistress' eyes are nothing like the sun,<span class="nt">&lt;br&gt;</span>
  Coral is far more red, than her lips red,<span class="nt">&lt;br&gt;</span>
  ...
</pre>
     </div>
     <div class="example" id="example-f4d7ef76">
      <a class="self-link" href="grouping-content.html#example-f4d7ef76"></a> This example shows how a forum post could use <code>blockquote</code> to show what post a user
    is replying to. The <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-32">article</a></code> element is used for each post, to mark up the
    threading. 
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;h1&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://bacon.example.com/?blog=109431"</span><span class="nt">&gt;</span>Bacon on a crowbar<span class="nt">&lt;/a&gt;&lt;/h1&gt;</span>
  <span class="nt">&lt;article&gt;</span>
    <span class="nt">&lt;header&gt;&lt;strong&gt;</span>t3yw<span class="nt">&lt;/strong&gt;</span> 12 points 1 hour ago<span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;p&gt;</span>I bet a narwhal would love that.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;footer&gt;&lt;a</span> <span class="na">href=</span><span class="s">"?pid=29578"</span><span class="nt">&gt;</span>permalink<span class="nt">&lt;/a&gt;&lt;/footer&gt;</span>
    <span class="nt">&lt;article&gt;</span>
      <span class="nt">&lt;header&gt;&lt;strong&gt;</span>greg<span class="nt">&lt;/strong&gt;</span> 8 points 1 hour ago<span class="nt">&lt;/header&gt;</span>
      <span class="nt">&lt;blockquote&gt;&lt;p&gt;</span>I bet a narwhal would love that.<span class="nt">&lt;/p&gt;&lt;/blockquote&gt;</span>
      <span class="nt">&lt;p&gt;</span>Dude narwhals don’t eat bacon.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;footer&gt;&lt;a</span> <span class="na">href=</span><span class="s">"?pid=29579"</span><span class="nt">&gt;</span>permalink<span class="nt">&lt;/a&gt;&lt;/footer&gt;</span>
      <span class="nt">&lt;article&gt;</span>
        <span class="nt">&lt;header&gt;&lt;strong&gt;</span>t3yw<span class="nt">&lt;/strong&gt;</span> 15 points 1 hour ago<span class="nt">&lt;/header&gt;</span>
        <span class="nt">&lt;blockquote&gt;</span>
          <span class="nt">&lt;blockquote&gt;&lt;p&gt;</span>I bet a narwhal would love that.<span class="nt">&lt;/p&gt;&lt;/blockquote&gt;</span>
          <span class="nt">&lt;p&gt;</span>Dude narwhals don’t eat bacon.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/blockquote&gt;</span>
        <span class="nt">&lt;p&gt;</span>Next thing you’ll be saying they don’t get capes and wizard
        hats either!<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;footer&gt;&lt;a</span> <span class="na">href=</span><span class="s">"?pid=29580"</span><span class="nt">&gt;</span>permalink<span class="nt">&lt;/a&gt;&lt;/footer&gt;</span>
        <span class="nt">&lt;article&gt;</span>
          <span class="nt">&lt;header&gt;&lt;strong&gt;</span>boing<span class="nt">&lt;/strong&gt;</span> -5 points 1 hour ago<span class="nt">&lt;/header&gt;</span>
          <span class="nt">&lt;p&gt;</span>narwhals are worse than ceiling cat<span class="nt">&lt;/p&gt;</span>
          <span class="nt">&lt;footer&gt;&lt;a</span> <span class="na">href=</span><span class="s">"?pid=29581"</span><span class="nt">&gt;</span>permalink<span class="nt">&lt;/a&gt;&lt;/footer&gt;</span>
        <span class="nt">&lt;/article&gt;</span>
      <span class="nt">&lt;/article&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
    <span class="nt">&lt;article&gt;</span>
      <span class="nt">&lt;header&gt;&lt;strong&gt;</span>fred<span class="nt">&lt;/strong&gt;</span> 1 points 23 minutes ago<span class="nt">&lt;/header&gt;</span>
      <span class="nt">&lt;blockquote&gt;&lt;p&gt;</span>I bet a narwhal would love that.<span class="nt">&lt;/p&gt;&lt;/blockquote&gt;</span>
      <span class="nt">&lt;p&gt;</span>I bet they’d love to peel a banana too.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;footer&gt;&lt;a</span> <span class="na">href=</span><span class="s">"?pid=29582"</span><span class="nt">&gt;</span>permalink<span class="nt">&lt;/a&gt;&lt;/footer&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
  <span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <div class="example" id="example-7c35dc73">
      <a class="self-link" href="grouping-content.html#example-7c35dc73"></a> This example shows the use of a <code>blockquote</code> for short snippets, demonstrating that
    one does not have to use <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-24">p</a></code> elements inside <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-13">blockquote</a></code> elements: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>He began his list of "lessons" with the following:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;blockquote&gt;</span>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.<span class="nt">&lt;/blockquote&gt;</span>
<span class="nt">&lt;p&gt;</span>He continued with a number of similar points, ending with:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;blockquote&gt;</span>Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.<span class="nt">&lt;/blockquote&gt;</span>
<span class="nt">&lt;p&gt;</span>We shall now discuss these points...
</pre>
     </div>
     <p class="note" role="note"> <a href="common-idioms-without-dedicated-elements.html#conversations">Examples of how to represent a conversation</a> are shown in a later section; it is not
    appropriate to use the <code>cite</code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-14">blockquote</a></code> elements for this purpose. </p>
     <h4 class="heading settled" data-level="4.4.5" id="the-ol-element"><span class="secno">4.4.5. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-ol"><code>ol</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-ol-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-22">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-42">Flow content</a>.
      </dd><dd> If the element’s children include at least one <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-5">li</a></code> element: <a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-13">Palpable content</a>. 
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-21">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-43">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-24">Content model</a>:
      </dt><dd>Zero or more <code>li</code> and <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-1">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-21">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-22">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-21">Global attributes</a>
      </dd><dd><code>reversed</code> - Number the list backwards.
      </dd><dd><code>start</code> - <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-1">Ordinal value</a> of the first item 
      </dd><dd><code>type</code> - Kind of list marker.
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#list"><code>list</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-11"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#directory"><code>directory</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#group"><code>group</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#listbox"><code>listbox</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menu"><code>menu</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menubar"><code>menubar</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#radiogroup"><code>radiogroup</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tablist"><code>tablist</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#toolbar"><code>toolbar</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tree"><code>tree</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-23">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-21">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLOListElement" data-dfn-type="interface" data-export="" id="htmlolistelement-htmlolistelement">HTMLOListElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-31">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="grouping-content.html#dom-htmlolistelement-reversed" id="ref-for-dom-htmlolistelement-reversed-1">reversed</a>;
  <span class="kt">attribute</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-type="long" href="grouping-content.html#dom-htmlolistelement-start" id="ref-for-dom-htmlolistelement-start-1">start</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="grouping-content.html#dom-htmlolistelement-type" id="ref-for-dom-htmlolistelement-type-1">type</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-6">ol</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-26">represents</a> a list of items, where the items have been
  intentionally ordered, such that changing the order would change the meaning of the document.</p>
     <p>The items of the list are the <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-6">li</a></code> element child nodes of the <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-7">ol</a></code> element,
  in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-26">tree order</a>.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="ol" data-dfn-type="element-attr" data-export="" id="element-attrdef-ol-reversed"><code>reversed</code></dfn> attribute is a <a data-link-type="dfn" href="infrastructure.html#boolean-attribute" id="ref-for-boolean-attribute-4">boolean attribute</a>. If present, it
  indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list
  is an ascending list (1, 2, 3, ...).</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="ol" data-dfn-type="element-attr" data-export="" id="element-attrdef-ol-start"><code>start</code></dfn> attribute, if present, must be a <a data-link-type="dfn" href="infrastructure.html#valid-integer" id="ref-for-valid-integer-6">valid integer</a> giving the <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-2">ordinal value</a> of the first list item.</p>
     <div class="impl">
       If the <code>start</code> attribute is present, user agents must <a data-link-type="dfn" href="infrastructure.html#parse-token-as-an-integer" id="ref-for-parse-token-as-an-integer-4">parse it as an integer</a>,
    in order to determine the attribute’s value. The default value, used if the attribute is missing
    or if the value cannot be converted to a number according to the referenced algorithm, is 1 if
    the element has no <code>reversed</code> attribute, and is the number of child <code>li</code> elements otherwise. 
      <p>The first item in the list has the <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-3">ordinal value</a> given by the <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-8">ol</a></code> element’s <code>start</code> attribute, unless that <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-7">li</a></code> element has a <code>value</code> attribute with a value that can be successfully parsed, in which case it has the <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-4">ordinal value</a> given by that <code>value</code> attribute.</p>
      <p>Each subsequent item in the list has the <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-5">ordinal value</a> given by its <code>value</code> attribute, if it has one, or, if it doesn’t, the <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-6">ordinal value</a> of the previous item, plus
    one if the <code>reversed</code> is absent, or minus one if it is present.</p>
     </div>
     <p>The <dfn class="dfn-paneled" data-dfn-for="ol" data-dfn-type="element-attr" data-export="" id="element-attrdef-ol-type"><code>type</code></dfn> attribute can be used to specify the kind of marker to use in the
  list, in the cases where that matters (e.g., because items are to be referenced by their
  number/letter). The attribute, if specified, must have a value that is a <a data-link-type="dfn" href="infrastructure.html#case-sensitive" id="ref-for-case-sensitive-4">case-sensitive</a> match for one of the characters given in the first cell of one of the rows of the following table. <span class="impl">The <code>type</code> attribute represents the state given in the cell in the
  second column of the row whose first cell matches the attribute’s value; if none of the cells
  match, or if the attribute is omitted, then the attribute represents the <a data-link-type="state" href="grouping-content.html#statedef-ol-decimal" id="ref-for-statedef-ol-decimal-1">decimal</a> state.</span></p>
     <table>
      <thead>
       <tr>
        <th>Keyword
        </th><th>State
        </th><th>Description
        </th><th colspan="8">Examples for values 1-3 and 3999-4001
      </th></tr></thead><tbody>
       <tr>
        <td><dfn data-dfn-for="ol/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-ol-type-1"><code>1</code><a class="self-link" href="grouping-content.html#attr-valuedef-ol-type-1"></a></dfn> (U+0031)
        </td><td><dfn class="dfn-paneled" data-dfn-for="ol" data-dfn-type="state" data-export="" id="statedef-ol-decimal">decimal</dfn>
        </td><td>Decimal numbers
        </td><td class="eg"><samp>1.</samp>
        </td><td class="eg"><samp>2.</samp>
        </td><td class="eg"><samp>3.</samp>
        </td><td class="eg">... 
        </td><td class="eg"><samp>3999.</samp>
        </td><td class="eg"><samp>4000.</samp>
        </td><td class="eg"><samp>4001.</samp>
        </td><td class="eg">...
       </td></tr><tr>
        <td><dfn data-dfn-for="ol/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-ol-type-a"><code>a</code><a class="self-link" href="grouping-content.html#attr-valuedef-ol-type-a"></a></dfn> (U+0061)
        </td><td><dfn data-dfn-for="ol" data-dfn-type="state" data-export="" id="statedef-ol-lower-alpha">lower-alpha<a class="self-link" href="grouping-content.html#statedef-ol-lower-alpha"></a></dfn>
        </td><td>Lowercase latin alphabet
        </td><td class="eg"><samp>a.</samp>
        </td><td class="eg"><samp>b.</samp>
        </td><td class="eg"><samp>c.</samp>
        </td><td class="eg">... 
        </td><td class="eg"><samp>ewu.</samp>
        </td><td class="eg"><samp>ewv.</samp>
        </td><td class="eg"><samp>eww.</samp>
        </td><td class="eg">...
       </td></tr><tr>
        <td><code>A</code> (U+0041)
        </td><td><dfn data-dfn-for="ol" data-dfn-type="state" data-export="" id="statedef-ol-upper-alpha">upper-alpha<a class="self-link" href="grouping-content.html#statedef-ol-upper-alpha"></a></dfn>
        </td><td>Uppercase latin alphabet
        </td><td class="eg"><samp>A.</samp>
        </td><td class="eg"><samp>B.</samp>
        </td><td class="eg"><samp>C.</samp>
        </td><td class="eg">... 
        </td><td class="eg"><samp>EWU.</samp>
        </td><td class="eg"><samp>EWV.</samp>
        </td><td class="eg"><samp>EWW.</samp>
        </td><td class="eg">...
       </td></tr><tr>
        <td><dfn data-dfn-for="ol/type" data-dfn-type="attr-value" data-export="" id="attr-valuedef-ol-type-i"><code>i</code><a class="self-link" href="grouping-content.html#attr-valuedef-ol-type-i"></a></dfn> (U+0069)
        </td><td><dfn data-dfn-for="ol" data-dfn-type="state" data-export="" id="statedef-ol-lower-roman">lower-roman<a class="self-link" href="grouping-content.html#statedef-ol-lower-roman"></a></dfn>
        </td><td>Lowercase roman numerals
        </td><td class="eg"><samp>i.</samp>
        </td><td class="eg"><samp>ii.</samp>
        </td><td class="eg"><samp>iii.</samp>
        </td><td class="eg">... 
        </td><td class="eg"><samp>mmmcmxcix.</samp>
        </td><td class="eg"><samp>i̅v̅.</samp>
        </td><td class="eg"><samp>i̅v̅i.</samp>
        </td><td class="eg">...
       </td></tr><tr>
        <td><code>I</code> (U+0049)
        </td><td><dfn data-dfn-for="ol" data-dfn-type="state" data-export="" id="statedef-ol-upper-roman">upper-roman<a class="self-link" href="grouping-content.html#statedef-ol-upper-roman"></a></dfn>
        </td><td>Uppercase roman numerals
        </td><td class="eg"><samp>I.</samp>
        </td><td class="eg"><samp>II.</samp>
        </td><td class="eg"><samp>III.</samp>
        </td><td class="eg">... 
        </td><td class="eg"><samp>MMMCMXCIX.</samp>
        </td><td class="eg"><samp>I̅V̅.</samp>
        </td><td class="eg"><samp>I̅V̅I.</samp>
        </td><td class="eg">...
     </td></tr></tbody></table>
     <div class="impl">
       User agents should render the items of the list in a manner consistent with the state of the <code>type</code> attribute of the <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-9">ol</a></code> element. Numbers less than or equal to zero
    should always use the decimal system regardless of the <code>type</code> attribute. 
      <p class="note" role="note"> For CSS user agents, a mapping for this attribute to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-lists/#propdef-list-style-type">list-style-type</a> CSS property is
      given in the <a href="rendering.html#rendering">§10 Rendering</a> section (the mapping is straightforward: the states above have
      the same names as their corresponding CSS values). </p>
     </div>
     <p class="note" role="note"> It is possible to redefine the default CSS list styles used to implement this attribute in CSS
    user agents; doing so will affect how list items are rendered. </p>
     <div class="impl"> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLOListElement" data-dfn-type="attribute" data-export="" id="dom-htmlolistelement-reversed"><code>reversed</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLOListElement" data-dfn-type="attribute" data-export="" id="dom-htmlolistelement-start"><code>start</code></dfn>, and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLOListElement" data-dfn-type="attribute" data-export="" id="dom-htmlolistelement-type"><code>type</code></dfn> IDL attributes must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-16">reflect</a> the respective content
    attributes of the same name. The <code>start</code> IDL attribute has the same default as its
    content attribute. </div>
     <div class="example" id="example-51863af6">
      <a class="self-link" href="grouping-content.html#example-51863af6"></a> The following markup shows a list where the order matters, and where the <code>ol</code> element is therefore appropriate. Compare this list to the equivalent list in the <code>ul</code> section to see an example of the same items using the <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-7">ul</a></code> element. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>I have lived in the following countries (given in the order of when
I first lived there):<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;</span>Switzerland
  <span class="nt">&lt;li&gt;</span>United Kingdom
  <span class="nt">&lt;li&gt;</span>United States
  <span class="nt">&lt;li&gt;</span>Norway
<span class="nt">&lt;/ol&gt;</span>
</pre>
      <p>Note how changing the order of the list changes the meaning of the document. In the following
    example, changing the relative order of the first two items has changed the birthplace of the
    author:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>I have lived in the following countries (given in the order of when
I first lived there):<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;</span>United Kingdom
  <span class="nt">&lt;li&gt;</span>Switzerland
  <span class="nt">&lt;li&gt;</span>United States
  <span class="nt">&lt;li&gt;</span>Norway
<span class="nt">&lt;/ol&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.4.6" id="the-ul-element"><span class="secno">4.4.6. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-ul"><code>ul</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-ul-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-23">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-44">Flow content</a>.
      </dd><dd> If the element’s children include at least one <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-8">li</a></code> element: <a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-14">Palpable content</a>. 
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-22">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-45">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-25">Content model</a>:
      </dt><dd>Zero or more <code>li</code> and <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-2">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-22">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-23">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-22">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#list"><code>list</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-12"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#directory"><code>directory</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#group"><code>group</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#listbox"><code>listbox</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menu"><code>menu</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menubar"><code>menubar</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#radiogroup"><code>radiogroup</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tablist"><code>tablist</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#toolbar"><code>toolbar</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tree"><code>tree</code></a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-24">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-22">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLUListElement" data-dfn-type="interface" data-export="" id="htmlulistelement-htmlulistelement">HTMLUListElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-32">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-8">ul</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-27">represents</a> a list of items, where the order of the items is not
  important — that is, where changing the order would not materially change the meaning of the
  document.</p>
     <p>The items of the list are the <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-9">li</a></code> element child nodes of the <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-9">ul</a></code> element.</p>
     <div class="example" id="example-f7196767">
      <a class="self-link" href="grouping-content.html#example-f7196767"></a> The following markup shows a list where the order does not matter, and where the <code>ul</code> element is therefore appropriate. Compare this list to the equivalent list in the <code>ol</code> section to see an example of the same items using the <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-10">ol</a></code> element. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>I have lived in the following countries:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;</span>Norway
  <span class="nt">&lt;li&gt;</span>Switzerland
  <span class="nt">&lt;li&gt;</span>United Kingdom
  <span class="nt">&lt;li&gt;</span>United States
<span class="nt">&lt;/ul&gt;</span>
</pre>
      <p>Note that changing the order of the list does not change the meaning of the document. The
    items in the snippet above are given in alphabetical order, but in the snippet below they are
    given in order of the size of their current account balance in 2007, without changing the meaning
    of the document whatsoever:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>I have lived in the following countries:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;</span>Switzerland
  <span class="nt">&lt;li&gt;</span>Norway
  <span class="nt">&lt;li&gt;</span>United Kingdom
  <span class="nt">&lt;li&gt;</span>United States
<span class="nt">&lt;/ul&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.4.7" id="the-li-element"><span class="secno">4.4.7. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-li"><code>li</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-li-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-24">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-23">Contexts in which this element can be used</a>:
      </dt><dd>Inside <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-11">ol</a></code> elements.
      </dd><dd>Inside <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-10">ul</a></code> elements.
      </dd><dd> Inside <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-6">menu</a></code> elements whose <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-toolbar" id="ref-for-statedef-menu-toolbar-2">toolbar</a> state. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-26">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-46">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-23">Tag omission in text/html</a>:
      </dt><dd> An <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-10">li</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-11">end tag</a> may be omitted if the <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-11">li</a></code> element is
      immediately followed by another <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-12">li</a></code> element or if there is no more content in the
      parent element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-24">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-23">Global attributes</a>
      </dd><dd>If the element is not a child of an <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-11">ul</a></code> or <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-7">menu</a></code> element: <code>value</code>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#listitem"><code>listitem</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-13"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menuitem"><code>menuitem</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menuitemcheckbox"><code>menuitemcheckbox</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menuitemradio"><code>menuitemradio</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#option"><code>option</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#radio"><code>radio</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#separator"><code>separator</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tab"><code>tab</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#treeitem"><code>treeitem</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-25">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-23">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLLIElement" data-dfn-type="interface" data-export="" id="htmllielement-htmllielement">HTMLLIElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-33">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-type="long" href="grouping-content.html#dom-htmllielement-value" id="ref-for-dom-htmllielement-value-1">value</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-13">li</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-28">represents</a> a list item. If its parent element is an <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-12">ol</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-12">ul</a></code>, or <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-8">menu</a></code> element, then the element is an item of the
  parent element’s list, as defined for those elements. Otherwise, the list item has no defined
  list-related relationship to any other <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-14">li</a></code> element.</p>
     <p>If the parent element is an <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-13">ol</a></code> element, then the <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-15">li</a></code> element has an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ordinal-value">ordinal value</dfn>.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="li" data-dfn-type="element-attr" data-export="" id="element-attrdef-li-value"><code>value</code></dfn> attribute, if present, must be a <a data-link-type="dfn" href="infrastructure.html#valid-integer" id="ref-for-valid-integer-7">valid integer</a> giving the <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-7">ordinal value</a> of the list item.</p>
     <div class="impl">
       If the <code>value</code> attribute is present, user agents must <a data-link-type="dfn" href="infrastructure.html#parse-token-as-an-integer" id="ref-for-parse-token-as-an-integer-5">parse it as an integer</a>,
    in order to determine the attribute’s value. If the attribute’s value cannot be converted to a
    number, the attribute must be treated as if it was absent. The attribute has no default value. 
      <p>The <code>value</code> attribute is processed relative to the element’s parent <code>ol</code> element (q.v.), if there is one. If there is not, the attribute has no effect.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLIElement" data-dfn-type="attribute" data-export="" id="dom-htmllielement-value"><code>value</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-17">reflect</a> the value of the <code>value</code> content attribute.</p>
     </div>
     <div class="example" id="example-b4ac5f5b">
      <a class="self-link" href="grouping-content.html#example-b4ac5f5b"></a> The following example, the top ten movies are listed (in reverse order). Note the way the list
    is given a title by using a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-7">figure</a></code> element and its <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-3">figcaption</a></code> element. 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>The top 10 movies of all time<span class="nt">&lt;/figcaption&gt;</span>
  <span class="nt">&lt;ol&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"10"</span><span class="nt">&gt;&lt;cite&gt;</span>Josie and the Pussycats<span class="nt">&lt;/cite&gt;</span>, 2001<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"9"</span><span class="nt">&gt;&lt;cite</span> <span class="na">lang=</span><span class="s">"sh"</span><span class="nt">&gt;</span>Црна мачка, бели мачор<span class="nt">&lt;/cite&gt;</span>, 1998<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"8"</span><span class="nt">&gt;&lt;cite&gt;</span>A Bug’s Life<span class="nt">&lt;/cite&gt;</span>, 1998<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"7"</span><span class="nt">&gt;&lt;cite&gt;</span>Toy Story<span class="nt">&lt;/cite&gt;</span>, 1995<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"6"</span><span class="nt">&gt;&lt;cite&gt;</span>Monsters, Inc<span class="nt">&lt;/cite&gt;</span>, 2001<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">&gt;&lt;cite&gt;</span>Cars<span class="nt">&lt;/cite&gt;</span>, 2006<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"4"</span><span class="nt">&gt;&lt;cite&gt;</span>Toy Story 2<span class="nt">&lt;/cite&gt;</span>, 1999<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">&gt;&lt;cite&gt;</span>Finding Nemo<span class="nt">&lt;/cite&gt;</span>, 2003<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">&gt;&lt;cite&gt;</span>The Incredibles<span class="nt">&lt;/cite&gt;</span>, 2004<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">&gt;&lt;cite&gt;</span>Ratatouille<span class="nt">&lt;/cite&gt;</span>, 2007<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
      <p>The markup could also be written as follows, using the <code>reversed</code> attribute on the <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-14">ol</a></code> element:</p>
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>The top 10 movies of all time<span class="nt">&lt;/figcaption&gt;</span>
  <span class="nt">&lt;ol</span> <span class="na">reversed</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>Josie and the Pussycats<span class="nt">&lt;/cite&gt;</span>, 2001<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite</span> <span class="na">lang=</span><span class="s">"sh"</span><span class="nt">&gt;</span>Црна мачка, бели мачор<span class="nt">&lt;/cite&gt;</span>, 1998<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>A Bug’s Life<span class="nt">&lt;/cite&gt;</span>, 1998<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>Toy Story<span class="nt">&lt;/cite&gt;</span>, 1995<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>Monsters, Inc<span class="nt">&lt;/cite&gt;</span>, 2001<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>Cars<span class="nt">&lt;/cite&gt;</span>, 2006<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>Toy Story 2<span class="nt">&lt;/cite&gt;</span>, 1999<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>Finding Nemo<span class="nt">&lt;/cite&gt;</span>, 2003<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>The Incredibles<span class="nt">&lt;/cite&gt;</span>, 2004<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;cite&gt;</span>Ratatouille<span class="nt">&lt;/cite&gt;</span>, 2007<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
     </div>
     <p class="note" role="note"> While it is conforming to include heading elements (e.g., <code>h1</code>) inside <code>li</code> elements, it likely does not convey the semantics that the author intended. A heading starts a
    new section, so a heading in a list implicitly splits the list into spanning multiple sections. </p>
     <h4 class="heading settled" data-level="4.4.8" id="the-dl-element"><span class="secno">4.4.8. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-dl"><code>dl</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-dl-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-25">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-47">Flow content</a>.
      </dd><dd>If the element’s children include at least one name-value group: <a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-15">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-24">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-48">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-27">Content model</a>:
      </dt><dd> Zero or more groups each consisting of one or more <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-1">dt</a></code> elements followed by one or
      more <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-1">dd</a></code> elements, optionally intermixed with <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-3">script-supporting elements</a>. 
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-24">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-25">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-24">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#list"><code>list</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-14"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#directory"><code>directory</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#group"><code>group</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#listbox"><code>listbox</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menu"><code>menu</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menubar"><code>menubar</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#radiogroup"><code>radiogroup</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tablist"><code>tablist</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#toolbar"><code>toolbar</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tree"><code>tree</code></a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-26">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-24">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLDListElement" data-dfn-type="interface" data-export="" id="htmldlistelement-htmldlistelement">HTMLDListElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-34">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-4">dl</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-29">represents</a> a description list of zero or more term-description groups. Each term-description group consists of one or more terms (represented by <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-2">dt</a></code> elements), and one or more descriptions (represented by <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-2">dd</a></code> elements).</p>
     <p>Term-description groups may be names  and definitions, questions and answers, categories and topics, or any other groups of term-description pairs.</p>
     <div class="example" id="example-85dfd063">
      <a class="self-link" href="grouping-content.html#example-85dfd063"></a> 
      <p>In this example a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-5">dl</a></code> is used to represent a simple list of names and descriptions:</p>
<pre class="highlight"><span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt&gt;</span>Blanco tequila<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>The purest form of the blue agave spirit...<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span>Reposado tequila<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Typically aged in wooden barrels for between two and eleven months...<span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <p>Each term within a term-description group must be represented by a single <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-3">dt</a></code> element. The descriptions within a term-description group are alternatives. Each description must be represented by a single <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-3">dd</a></code> element.</p>
     <div class="example" id="example-e79dae5b">
      <a class="self-link" href="grouping-content.html#example-e79dae5b"></a> 
      <p>In this example a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-6">dl</a></code> element represents a set of terms, each of which has multiple descriptions:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Information about the rock band Queen:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt&gt;</span>Members<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Brian May<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Freddie Mercury<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd&gt;</span>John Deacon<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Roger Taylor<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span>Record labels<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>EMI<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Parlophone<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Capitol<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Hollywood<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Island<span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <p>The order of term-description groups within a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-7">dl</a></code> element, and the order of terms and descriptions within each group, may be significant.</p>
     <div class="example" id="example-b7751c17">
      <a class="self-link" href="grouping-content.html#example-b7751c17"></a> 
      <p>In this example a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-8">dl</a></code> is used to show a set of instructions, where the order of the instructions is important:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Determine the victory points as follows (use the first matching case):<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt&gt;</span> If you have exactly five gold coins <span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span> You get five victory points <span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span> If you have one or more gold coins, and you have one or more silver coins <span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span> You get two victory points <span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span> If you have one or more silver coins <span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span> You get one victory point <span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span> Otherwise <span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span> You get no victory points <span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <p>If a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-9">dl</a></code> element contains no <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-4">dt</a></code> or <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-4">dd</a></code> child elements, it contains no term-description groups.</p>
     <p>If a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-10">dl</a></code> element has one or more non-<a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#whitespace">whitespace</a> text node children, or has children that are neither <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-5">dt</a></code> or <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-5">dd</a></code> elements, then all such text nodes and elements as well as their descendants (including any <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-6">dt</a></code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-6">dd</a></code> elements) do not form part of any term-description group within the <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-11">dl</a></code>.</p>
     <p>If a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-12">dl</a></code> element has one or more <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-7">dt</a></code> element children, but no <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-7">dd</a></code> element children, then it consists of one group with terms but no descriptions.</p>
     <p>If a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-13">dl</a></code> element has one or more <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-8">dd</a></code> element children, but no <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-8">dt</a></code> element children, it consists of one group with descriptions but no terms.</p>
     <p>If a <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-9">dd</a></code> element is the first child of a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-14">dl</a></code> element (excepting a <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-4">script-supporting element</a>), the first group has no associated term.</p>
     <p>If a <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-9">dt</a></code> element is the last child of a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-15">dl</a></code> element (excepting a <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-5">script-supporting element</a>), the last group has no associated descriptions.</p>
     <p class="note" role="note">Note: when a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-16">dl</a></code> element does not match its content model, it is often because a <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-10">dd</a></code> element has been used instead of a <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-10">dt</a></code> element, or vice versa.</p>
     <h4 class="heading settled" data-level="4.4.9" id="the-dt-element"><span class="secno">4.4.9. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-dt"><code>dt</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-dt-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-26">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-25">Contexts in which this element can be used</a>:
      </dt><dd>Before <code>dd</code> or <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-11">dt</a></code> elements inside <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-17">dl</a></code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-28">Content model</a>:
      </dt><dd> <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-49">Flow content</a>, but with no <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-22">header</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-23">footer</a></code>, <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-38">sectioning content</a>, or <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-11">heading content</a> descendants. 
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-25">Tag omission in text/html</a>:
      </dt><dd> A <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-12">dt</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-12">end tag</a> may be omitted if the <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-13">dt</a></code> element is
      immediately followed by another <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-14">dt</a></code> element or a <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-11">dd</a></code> element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-26">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-25">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> None.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-27">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes
    None
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-25">DOM interface</a>:
      </dt><dd>Uses <code>HTMLElement</code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-15">dt</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-30">represents</a> a term, part of a term-description group in a description list (<code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-18">dl</a></code> element).</p>
     <div class="example" id="example-9af0af12">
      <a class="self-link" href="grouping-content.html#example-9af0af12"></a> 
      <p>In this example the <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-16">dt</a></code> elements represent questions and the <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-12">dd</a></code> elements the answers:</p>
<pre class="highlight"><span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt&gt;</span>What is my favorite drink?<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Tea<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span>What is my favorite food?<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Sushi<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span>What is my favourite film?<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>What a Wonderful Life<span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <p class="note" role="note">When used within a <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-19">dl</a></code> element, the <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-17">dt</a></code> element does not necessarily represent the definition for a term. The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-5">dfn</a></code> element should be used to represent a definition.</p>
     <div class="example" id="example-58c943eb">
      <a class="self-link" href="grouping-content.html#example-58c943eb"></a> 
      <p>In this example the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-6">dfn</a></code> element indicates that the <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-18">dt</a></code> element contains a defined term, the definition for which is represented by the <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-13">dd</a></code> element:</p>
<pre class="highlight"><span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt</span> <span class="na">lang=</span><span class="s">"en-us"</span><span class="nt">&gt;&lt;dfn&gt;</span>Color<span class="nt">&lt;/dfn&gt;&lt;/dt&gt;</span>
  <span class="nt">&lt;dt</span> <span class="na">lang=</span><span class="s">"en-gb"</span><span class="nt">&gt;&lt;dfn&gt;</span>Colour<span class="nt">&lt;/dfn&gt;&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.<span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.4.10" id="the-dd-element"><span class="secno">4.4.10. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-dd"><code>dd</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-dd-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-27">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-26">Contexts in which this element can be used</a>:
      </dt><dd>After <code>dt</code> or <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-14">dd</a></code> elements inside <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-20">dl</a></code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-29">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-50">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-26">Tag omission in text/html</a>:
      </dt><dd> A <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-15">dd</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-13">end tag</a> may be omitted if the <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-16">dd</a></code> element is
      immediately followed by another <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-17">dd</a></code> element or a <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-19">dt</a></code> element, or if
      there is no more content in the parent element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-27">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-26">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-28">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-26">DOM interface</a>:
      </dt><dd>Uses <code>HTMLElement</code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-18">dd</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-31">represents</a> a description, part of a term-description group in a description list (<code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-21">dl</a></code> element).</p>
     <div class="example" id="example-e73bff5b">
      <a class="self-link" href="grouping-content.html#example-e73bff5b"></a> 
      <p>In this example the <code><a data-link-type="element" href="grouping-content.html#elementdef-dd" id="ref-for-elementdef-dd-19">dd</a></code> elements represent the keys that invoke the keycodes indicated in the <code><a data-link-type="element" href="grouping-content.html#elementdef-dt" id="ref-for-elementdef-dt-20">dt</a></code> elements:</p>
<pre class="highlight"><span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt&gt;</span>37<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Left<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span>38<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Right<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span>39<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Up<span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span>40<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd&gt;</span>Down<span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.4.11" id="the-figure-element"><span class="secno">4.4.11. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-figure"><code>figure</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-figure-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-28">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-51">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-20">Sectioning root</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-16">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-27">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-52">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-30">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-53">Flow content</a> optionally including a <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-4">figcaption</a></code> child element.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-27">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-28">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-27">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-29">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-27">DOM interface</a>:
      </dt><dd>Uses <code>HTMLElement</code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-8">figure</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-32">represents</a> some <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-54">flow content</a>, optionally with a
  caption, that is self-contained (like a complete sentence) and is typically referenced as a single
  unit from the main flow of the document.</p>
     <p class="note" role="note"> Self-contained in this context does not necessarily mean independent. For example, each sentence
    in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-9">figure</a></code>, but an entire sentence made of images would be fitting. </p>
     <p>The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.</p>
     <div class="note" role="note">
       When a <code>figure</code> is referred to from the main content of the document by identifying
    it by its caption (e.g., by figure number), it enables such content to be easily moved away from
    that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix,
    without affecting the flow of the document. 
      <p>If a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-10">figure</a></code> element is referenced by its relative position, e.g., "in the photograph
    above" or "as the next figure shows", then moving the figure would disrupt the page’s meaning.
    Authors are encouraged to consider using labels to refer to figures, rather than using such
    relative references, so that the page can easily be restyled without affecting the page’s
    meaning.</p>
     </div>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-5">figcaption</a></code> descendant of <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-11">figure</a></code>, if any, represents the caption of the <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-12">figure</a></code> element’s contents. If there is no child <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-6">figcaption</a></code> element, then there is no caption.</p>
     <p>A <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-13">figure</a></code> element’s contents are part of the surrounding flow. If the purpose of the
  page is to display the figure, for example a photograph on an image sharing site, the <code>figure</code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-7">figcaption</a></code> elements can be used to explicitly provide a
  caption for that figure. For content that is only tangentially related, or that serves a separate
  purpose than the surrounding flow, the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-14">aside</a></code> element should be used (and can itself
  wrap a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-14">figure</a></code>). For example, a pull quote that repeats content from an <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-33">article</a></code> would be more appropriate in an <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-15">aside</a></code> than in a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-15">figure</a></code>, because it isn’t part of the content, it’s a repetition of the content for
  the purposes of enticing readers or highlighting key topics.</p>
     <div class="example" id="example-8b836ce8">
      <a class="self-link" href="grouping-content.html#example-8b836ce8"></a> This example shows the <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-16">figure</a></code> element to mark up a code listing. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>In <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#l4"</span><span class="nt">&gt;</span>listing 4<span class="nt">&lt;/a&gt;</span> we see the primary core interface
API declaration.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">id=</span><span class="s">"l4"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>Listing 4. The primary core interface API declaration.<span class="nt">&lt;/figcaption&gt;</span>
  <span class="nt">&lt;pre&gt;&lt;code&gt;</span>interface PrimaryCore {
  boolean verifyDataLine();
  void sendData(in sequence<span class="ni">&amp;lt;</span>byte&gt; data);
  void initSelfDestruct();
}<span class="nt">&lt;/code&gt;&lt;/pre&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;p&gt;</span>The API is designed to use UTF-8.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-1b4e51d7">
      <a class="self-link" href="grouping-content.html#example-1b4e51d7"></a> Here we see a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-17">figure</a></code> element to mark up a photo that is the main content of the
    page (as in a gallery). 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE HTML&gt;</span>
<span class="nt">&lt;title&gt;</span>Bubbles at work — My Gallery™<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"bubbles-work.jpeg"</span>
      <span class="na">alt=</span><span class="s">"Bubbles, sitting in his office chair, works on his</span>
<span class="s">            latest project intently."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>Bubbles at work<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;nav&gt;&lt;a</span> <span class="na">href=</span><span class="s">"19414.html"</span><span class="nt">&gt;</span>Prev<span class="nt">&lt;/a&gt;</span> — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"19416.html"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;&lt;/nav&gt;</span>
</pre>
     </div>
     <div class="example" id="example-1e9b2fc6">
      <a class="self-link" href="grouping-content.html#example-1e9b2fc6"></a> In this example, we see an image that is <em>not</em> a figure, as well as an image and a video
    that are. The first image is literally part of the example’s second sentence, so it’s not a
    self-contained unit, and thus <code>figure</code> would be inappropriate. 
<pre class="highlight"><span class="nt">&lt;h2&gt;</span>Malinko’s comics<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"promblem-packed-action.png"</span> <span class="na">alt=</span><span class="s">"ROUGH COPY! Promblem-Packed Action!"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span>

<span class="nt">&lt;p&gt;</span>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"ex-a.png"</span> <span class="na">alt=</span><span class="s">"Two squiggles on a dirty piece of paper."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>Exhibit A. The alleged <span class="nt">&lt;cite&gt;</span>rough copy<span class="nt">&lt;/cite&gt;</span> comic.<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>

<span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;video</span> <span class="na">src=</span><span class="s">"ex-b.mov"</span><span class="nt">&gt;&lt;/video&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>Exhibit B. The <span class="nt">&lt;cite&gt;</span>Rough Copy<span class="nt">&lt;/cite&gt;</span> trailer.<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>

<span class="nt">&lt;p&gt;</span>The case was resolved out of court.
</pre>
     </div>
     <div class="example" id="example-1ae297ac">
      <a class="self-link" href="grouping-content.html#example-1ae297ac"></a> Here, a part of a poem is marked up using <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-18">figure</a></code>. 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;p&gt;</span>'Twas brillig, and the slithy toves<span class="nt">&lt;br&gt;</span>
  Did gyre and gimble in the wabe;<span class="nt">&lt;br&gt;</span>
  All mimsy were the borogoves,<span class="nt">&lt;br&gt;</span>
  And the mome raths outgrabe.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;figcaption&gt;&lt;cite&gt;</span>Jabberwocky<span class="nt">&lt;/cite&gt;</span> (first verse). Lewis Carroll, 1832-98<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
     </div>
     <div class="example" id="example-011a9353">
      <a class="self-link" href="grouping-content.html#example-011a9353"></a> In this example, which could be part of a much larger work discussing a castle, nested <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-19">figure</a></code> elements are used to provide both a group caption and individual captions for
    each figure in the group: 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>The castle through the ages: 1423, 1858, and 1999 respectively.<span class="nt">&lt;/figcaption&gt;</span>
  <span class="nt">&lt;figure&gt;</span>
    <span class="nt">&lt;figcaption&gt;</span>Etching. Anonymous, ca. 1423.<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"castle1423.jpeg"</span> <span class="na">alt=</span><span class="s">"The castle has one tower, and a tall wall around it."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/figure&gt;</span>
  <span class="nt">&lt;figure&gt;</span>
    <span class="nt">&lt;figcaption&gt;</span>Oil-based paint on canvas. Maria Towle, 1858.<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"castle1858.jpeg"</span> <span class="na">alt=</span><span class="s">"The castle now has two towers and two walls."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/figure&gt;</span>
  <span class="nt">&lt;figure&gt;</span>
    <span class="nt">&lt;figcaption&gt;</span>Film photograph. Peter Jankle, 1999.<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"castle1999.jpeg"</span> <span class="na">alt=</span><span class="s">"The castle lies in ruins, the original tower all that remains in one piece."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
     </div>
     <div class="example" id="example-3a24baf3">
      <a class="self-link" href="grouping-content.html#example-3a24baf3"></a> The previous example could also be more succinctly written as follows (using <code>title</code> attributes in place of the nested <code>figure</code>/<code>figcaption</code> pairs): 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"castle1423.jpeg"</span> <span class="na">title=</span><span class="s">"Etching. Anonymous, ca. 1423."</span>
      <span class="na">alt=</span><span class="s">"The castle has one tower, and a tall wall around it."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"castle1858.jpeg"</span> <span class="na">title=</span><span class="s">"Oil-based paint on canvas. Maria Towle, 1858."</span>
      <span class="na">alt=</span><span class="s">"The castle now has two towers and two walls."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"castle1999.jpeg"</span> <span class="na">title=</span><span class="s">"Film photograph. Peter Jankle, 1999."</span>
      <span class="na">alt=</span><span class="s">"The castle lies in ruins, the original tower all that remains in one piece."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>The castle through the ages: 1423, 1858, and 1999 respectively.<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
     </div>
     <div class="example" id="example-69cd944f">
      <a class="self-link" href="grouping-content.html#example-69cd944f"></a> The figure is sometimes referenced only implicitly from the content: 
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Fiscal negotiations stumble in Congress as deadline nears<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;figure&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"obama-reid.jpeg"</span> <span class="na">alt=</span><span class="s">"Obama and Reid sit together smiling in the Oval Office."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;figcaption&gt;</span>Barack Obama and Harry Reid. White House press photograph.<span class="nt">&lt;/figcaption&gt;</span>
  <span class="nt">&lt;/figure&gt;</span>
  <span class="nt">&lt;p&gt;</span>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
  grasping for a way to reopen the government and raise the country’s borrowing authority with a
  Thursday deadline drawing near.<span class="nt">&lt;/p&gt;</span>
  ...
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.4.12" id="the-figcaption-element"><span class="secno">4.4.12. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-figcaption"><code>figcaption</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-figcaption-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-29">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-28">Contexts in which this element can be used</a>:
      </dt><dd>As a descendant of a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-20">figure</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-31">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-55">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-28">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-29">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-28">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-30">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-28">DOM interface</a>:
      </dt><dd>Uses <code>HTMLElement</code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-8">figcaption</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-33">represents</a> a caption or legend for the rest of the
  contents of the <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-9">figcaption</a></code> element’s parent <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-21">figure</a></code> element, if any.</p>
     <h4 class="heading settled" data-level="4.4.13" id="the-main-element"><span class="secno">4.4.13. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-main"><code>main</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-main-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-30">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-56">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-17">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-29">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-57">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-32">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-58">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-29">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-30">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-29">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#main"><code>main</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-15"><em>do not set</em></a>) or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-31">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-29">DOM interface</a>:
      </dt><dd>Uses <code>HTMLElement</code>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-11">main</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-34">represents</a> the main content of the body of a document or application.</p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-12">main</a></code> element is not <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-39">sectioning content</a> and has no effect on the document <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-23">outline</a> </p>
      The main content area of a document includes content that is unique to that document and excludes
  content that is repeated  across a set of documents such as site navigation links, copyright
  information, site logos and banners and search forms (unless the document or application’s main
  function is that of a search form). 
     <p>Authors must not include the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-13">main</a></code> element as a descendant of an <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-34">article</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-16">aside</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-24">footer</a></code>, <code>header</code> or <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-18">nav</a></code> element.</p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-14">main</a></code> element is not suitable for use to identify the main content areas of sub
    sections of a document or application. The simplest solution is to not mark up the main content
    of a sub section at all, and just leave it as implicit, but an author could use a <a href="grouping-content.html#grouping-content">§4.4 Grouping content</a> or <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-40">sectioning content</a> element as appropriate. </p>
     <p>In the following example, we see 2 articles about skateboards (the main topic of a Web page) the
    main topic content is identified by the use of the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-15">main</a></code> element.</p>
     <div class="example" id="example-fc8bbe67">
      <a class="self-link" href="grouping-content.html#example-fc8bbe67"></a> 
<pre class="highlight"><span class="c">&lt;!-- other content --&gt;</span>

<span class="nt">&lt;main&gt;</span>

  <span class="nt">&lt;h1&gt;</span>Skateboards<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>The skateboard is the way cool kids get around<span class="nt">&lt;/p&gt;</span>

  <span class="nt">&lt;article&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Longboards<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>Longboards are a type of skateboard with a longer
    wheelbase and larger, softer wheels.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>... <span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>... <span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/article&gt;</span>

  <span class="nt">&lt;article&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Electric Skateboards<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>These no longer require the propelling of the skateboard
    by means of the feet; rather an electric motor propels the board,
    fed by an electric battery.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>... <span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>... <span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/article&gt;</span>

<span class="nt">&lt;/main&gt;</span>

<span class="c">&lt;!-- other content --&gt;</span>
</pre>
     </div>
     <p>Here is a graduation programme the main content section is defined by the use of the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-16">main</a></code> element. Note in this example the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-17">main</a></code> element contains a <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-19">nav</a></code> element consisting of links to sub sections of the main content.</p>
     <div class="example" id="example-d638f6dc">
      <a class="self-link" href="grouping-content.html#example-d638f6dc"></a> 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Graduation Ceremony Summer 2022<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>

    <span class="nt">&lt;header&gt;</span>The Lawson Academy:
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"courses.html"</span><span class="nt">&gt;</span>Courses<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"fees.html"</span><span class="nt">&gt;</span>Fees<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a&gt;</span>Graduation<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;/header&gt;</span>

    <span class="nt">&lt;main&gt;</span>

      <span class="nt">&lt;h1&gt;</span>Graduation<span class="nt">&lt;/h1&gt;</span>

      <span class="nt">&lt;nav&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#ceremony"</span><span class="nt">&gt;</span>Ceremony<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#graduates"</span><span class="nt">&gt;</span>Graduates<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#awards"</span><span class="nt">&gt;</span>Awards<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;/nav&gt;</span>

      <span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"ceremony"</span><span class="nt">&gt;</span>Ceremony<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>Opening Procession<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;p&gt;</span>Speech by Valedictorian<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;p&gt;</span>Speech by Class President<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;p&gt;</span>Presentation of Diplomas<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;p&gt;</span>Closing Speech by Headmaster<span class="nt">&lt;/p&gt;</span>

      <span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"graduates"</span><span class="nt">&gt;</span>Graduates<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;</span>Eileen Williams<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Andy Maseyk<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Blanca Sainz Garcia<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Clara Faulkner<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Gez Lemon<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Eloisa Faulkner<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>

      <span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"awards"</span><span class="nt">&gt;</span>Awards<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;</span>Clara Faulkner<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Eloisa Faulkner<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Blanca Sainz Garcia<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>

    <span class="nt">&lt;/main&gt;</span>

    <span class="nt">&lt;footer&gt;</span> Copyright 2012 B.lawson<span class="nt">&lt;/footer&gt;</span>

  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     </div>
     <p></p>
     <p>In the next example, both the <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-23">header</a></code> and the <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-25">footer</a></code> are outside the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-18">main</a></code> element
  because they are generic to the website and not specific to <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-19">main</a></code>'s content.</p>
     <div class="example" id="example-ea065aaa">
      <a class="self-link" href="grouping-content.html#example-ea065aaa"></a> 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Great Dogs for Families<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>

    <span class="nt">&lt;header&gt;</span>
      <span class="nt">&lt;h1&gt;</span>The Border Terrier<span class="nt">&lt;/h1&gt;</span>
      <span class="nt">&lt;nav&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"index.html"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"health.html"</span><span class="nt">&gt;</span>Health<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;main&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Welcome!<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>This site is all about the Border Terrier, the best breed of dog
      that there is!<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/main&gt;</span>
    <span class="nt">&lt;footer&gt;</span>
      <span class="nt">&lt;small&gt;</span>Copyright © <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2013"</span><span class="nt">&gt;</span>2013<span class="nt">&lt;/time&gt;</span> by I. Devlin<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>

  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     </div>
     <p>Here, the same generic <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-24">header</a></code> and <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-26">footer</a></code> elements remain outside <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-20">main</a></code>, but there
  is an additional <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-25">header</a></code> element within the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-21">main</a></code> element as its content is relevant to
  the content within <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-22">main</a></code> because it contains a relevant heading and in-page navigation.
  The in-page navigation is repeated within a <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-27">footer</a></code> which is again within the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-23">main</a></code> element.</p>
     <div class="example" id="example-6d680107">
      <a class="self-link" href="grouping-content.html#example-6d680107"></a> 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Great Dogs for Families<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>

    <span class="nt">&lt;header&gt;</span>
      <span class="nt">&lt;h1&gt;</span>The Border Terrier<span class="nt">&lt;/h1&gt;</span>
      <span class="nt">&lt;nav&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"index.html"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"health.html"</span><span class="nt">&gt;</span>Health<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;main&gt;</span>
      <span class="nt">&lt;section&gt;</span>
        <span class="nt">&lt;header&gt;</span>
          <span class="nt">&lt;h2&gt;</span>About<span class="nt">&lt;/h2&gt;</span>
          <span class="nt">&lt;nav&gt;</span>
            <span class="nt">&lt;ul&gt;</span>
              <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#basic"</span><span class="nt">&gt;</span>Basic<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
              <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#app"</span><span class="nt">&gt;</span>Appearance<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
              <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#temp"</span><span class="nt">&gt;</span>Temperament<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
            <span class="nt">&lt;/ul&gt;</span>
          <span class="nt">&lt;/nav&gt;</span>
        <span class="nt">&lt;/header&gt;</span>
        <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"basic"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h3&gt;</span>Basic Information<span class="nt">&lt;/h3&gt;</span>
          <span class="nt">&lt;p&gt;</span>The Border Terrier is a small, rough-coated breed of
          dog of the terrier group, originally bred as fox and vermin
          hunters. [...]<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/section&gt;</span>
        <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"app"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h3&gt;</span>Appearance<span class="nt">&lt;/h3&gt;</span>
          <span class="nt">&lt;p&gt;</span>Identifiable by their otter-shaped heads, Border Terriers
          have a broad skull and short (although many be fairly long),
          strong muzzle with a scissors bite. [...]<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/section&gt;</span>
        <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"temp"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h3&gt;</span>Temperament<span class="nt">&lt;/h3&gt;</span>
          <span class="nt">&lt;p&gt;</span>Though sometimes stubborn and strong willed, border terriers
          are, on the whole very even tempered, and are friendly and rarely
          aggressive. [...] <span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/section&gt;</span>
        <span class="nt">&lt;footer&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#basic"</span><span class="nt">&gt;</span>Basic<span class="nt">&lt;/a&gt;</span> -
          <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#app"</span><span class="nt">&gt;</span>Appearance<span class="nt">&lt;/a&gt;</span> -
          <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#temp"</span><span class="nt">&gt;</span>Temperament<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/footer&gt;</span>
      <span class="nt">&lt;/section&gt;</span>
    <span class="nt">&lt;/main&gt;</span>
    <span class="nt">&lt;footer&gt;</span>
      <span class="nt">&lt;small&gt;</span>Copyright © <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2013"</span><span class="nt">&gt;</span>2013<span class="nt">&lt;/time&gt;</span> by I. Devlin<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>

  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     </div>
     <p>This example is largely the same as the previous one except that it includes an <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-17">aside</a></code>.
  The content of the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-18">aside</a></code> is considered to be relevant to the content within the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-24">main</a></code> element, which is all about the Border Terrier, so the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-19">aside</a></code> is placed within the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-25">main</a></code> element.</p>
     <div class="example" id="example-4badd704">
      <a class="self-link" href="grouping-content.html#example-4badd704"></a> 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Great Dogs for Families<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>

    <span class="nt">&lt;header&gt;</span>
      <span class="nt">&lt;h1&gt;</span>The Border Terrier<span class="nt">&lt;/h1&gt;</span>
      <span class="nt">&lt;nav&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"index.html"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"health.html"</span><span class="nt">&gt;</span>Health<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;main&gt;</span>
      <span class="nt">&lt;section&gt;</span>
        <span class="nt">&lt;header&gt;</span>
          <span class="nt">&lt;h2&gt;</span>About<span class="nt">&lt;/h2&gt;</span>
          <span class="nt">&lt;nav&gt;</span>
            <span class="nt">&lt;ul&gt;</span>
              <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#basic"</span><span class="nt">&gt;</span>Basic<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
              <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#app"</span><span class="nt">&gt;</span>Appearance<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
              <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#temp"</span><span class="nt">&gt;</span>Temperament<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
            <span class="nt">&lt;/ul&gt;</span>
          <span class="nt">&lt;/nav&gt;</span>
        <span class="nt">&lt;/header&gt;</span>
        <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"basic"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h3&gt;</span>Basic Information<span class="nt">&lt;/h3&gt;</span>
          <span class="nt">&lt;p&gt;</span>The Border Terrier is a small, rough-coated breed of
          dog of the terrier group, originally bred as fox and vermin
          hunters. [...]<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/section&gt;</span>
        <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"app"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h3&gt;</span>Appearance<span class="nt">&lt;/h3&gt;</span>
          <span class="nt">&lt;p&gt;</span>Identifiable by their otter-shaped heads, Border Terriers
          have a broad skull and short (although many be fairly long),
          strong muzzle with a scissors bite. [...]<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/section&gt;</span>
        <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"temp"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h3&gt;</span>Temperament<span class="nt">&lt;/h3&gt;</span>
          <span class="nt">&lt;p&gt;</span>Though sometimes stubborn and strong willed, border terriers
          are, on the whole very even tempered, and are friendly and rarely
          aggressive. [...] <span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/section&gt;</span>
        <span class="nt">&lt;aside&gt;</span>
          <span class="nt">&lt;h3&gt;</span>History<span class="nt">&lt;/h3&gt;</span>
          <span class="nt">&lt;p&gt;</span>The Border Terrier originates in, and takes its name from the
          Scottish borders. [...] <span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/aside&gt;</span>
        <span class="nt">&lt;footer&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#basic"</span><span class="nt">&gt;</span>Basic<span class="nt">&lt;/a&gt;</span> -
          <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#app"</span><span class="nt">&gt;</span>Appearance<span class="nt">&lt;/a&gt;</span> -
          <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#temp"</span><span class="nt">&gt;</span>Temperament<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/footer&gt;</span>
      <span class="nt">&lt;/section&gt;</span>
    <span class="nt">&lt;/main&gt;</span>
    <span class="nt">&lt;footer&gt;</span>
      <span class="nt">&lt;small&gt;</span>Copyright © <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2013"</span><span class="nt">&gt;</span>2013<span class="nt">&lt;/time&gt;</span> by I. Devlin<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>

  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     </div>
     <p>In the following example, two <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-20">aside</a></code> elements containg adverts have been placed outside
  the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-26">main</a></code> element as their content is not specific to the content within <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-27">main</a></code>. These <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-21">aside</a></code>s could be on any page, as they are as generic as the <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-26">header</a></code> and <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-28">footer</a></code> shown.</p>
     <div class="example" id="example-e0603ea0">
      <a class="self-link" href="grouping-content.html#example-e0603ea0"></a> 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Great Dogs for Families<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>

    <span class="nt">&lt;header&gt;</span>
      <span class="nt">&lt;h1&gt;</span>The Border Terrier<span class="nt">&lt;/h1&gt;</span>
      <span class="nt">&lt;nav&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"index.html"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
          <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"health.html"</span><span class="nt">&gt;</span>Health<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;main&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Welcome!<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>This site is all about the Border Terrier, the best breed of dog
      that there is!<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/main&gt;</span>
    <span class="nt">&lt;aside</span> <span class="na">class=</span><span class="s">"advert"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Border Farm Breeders<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>We are a certified breeder of Border Terriers, contact us at...<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/aside&gt;</span>
    <span class="nt">&lt;aside</span> <span class="na">class=</span><span class="s">"advert"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Grumpy’s Pet Shop<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>Get all your pet’s needs at our shop!<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/aside&gt;</span>

    <span class="nt">&lt;footer&gt;</span>
      <span class="nt">&lt;small&gt;</span>Copyright © <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2013"</span><span class="nt">&gt;</span>2013<span class="nt">&lt;/time&gt;</span> by I. Devlin<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>

  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.4.14" id="the-div-element"><span class="secno">4.4.14. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-div"><code>div</code></dfn> element</span><a class="self-link" href="grouping-content.html#the-div-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-31">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-59">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-18">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-30">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-60">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-33">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-61">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-30">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-31">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-30">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-32">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-30">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLDivElement" data-dfn-type="interface" data-export="" id="htmldivelement-htmldivelement">HTMLDivElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-35">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-14">div</a></code> element has no special meaning at all. It <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-35">represents</a> its children. It
  can be used with the <code>class</code>, <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-27">lang</a></code>, and <code>title</code> attributes to
  mark up semantics common to a group of consecutive elements.</p>
     <p class="note" role="note"> Authors are strongly encouraged to view the <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-15">div</a></code> element as an element of last
    resort, for when no other element is suitable. Use of more appropriate elements instead of the <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-16">div</a></code> element leads to better accessibility for readers and easier maintainability
    for authors. </p>
     <div class="example" id="example-eceec2a4">
      <a class="self-link" href="grouping-content.html#example-eceec2a4"></a> For example, a blog post would be marked up using <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-35">article</a></code>, a chapter using <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-21">section</a></code>, a page’s navigation aids using <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-20">nav</a></code>, and a group of form
    controls using <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-5">fieldset</a></code>. 
      <p>On the other hand, <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-17">div</a></code> elements can be useful for stylistic purposes or to wrap
    multiple paragraphs within a section that are all to be annotated in a similar way. In the
    following example, we see <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-18">div</a></code> elements used as a way to set the language of two
    paragraphs at once, instead of setting the language on the two paragraph elements separately:</p>
<pre class="highlight"><span class="nt">&lt;article</span> <span class="na">lang=</span><span class="s">"en-US"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h2&gt;</span>My use of language and my cats<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>My cat’s behavior hasn’t changed much since her absence, except
  that she plays her new physique to the neighbors regularly, in an
  attempt to get pets.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">lang=</span><span class="s">"en-GB"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>My other cat, colored black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognizes that
  their flat is a mirror image of ours.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>Hm, I just noticed that in the last paragraph I used British
  English. But I’m supposed to write in American English. So I
  shouldn’t say "pavement" or "flat" or "color"...<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;p&gt;</span>I should say "sidewalk" and "apartment" and "color"!<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="sections.html#sections"><span class="secno">4.3</span> <span class="content">Sections</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="textlevel-semantics.html#textlevel-semantics"><span class="secno">4.5</span> <span class="content">Text-level semantics</span></a> →</p></body></html>
